<template>
  <div class="hs-et">
    <div class="hs-et-wrap" id="tend-root"></div>
  </div>
</template>

<script>
//员工出入趋势统计
import * as echarts from 'echarts';
const option = {
  title: {
    text: "-  近 一个月员工进入趋势  -",
    subtext: "",
    left: "center",
    top: 10,
    textStyle: {
      color: "#CFEEF8",
      fontSize: 14,
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "line", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  legend: {
    data: [
      {
        name: "进入人数",
        icon: "react",
        textStyle: {
          color: "#8F9297",
        },
      },
    ],
    orient: "vertical",
    top: "bottom", //如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
    itemGap: 20,
    itemWidth: 16,
    itemHeight: 8,
  },
  toolbox: {
    show: false,
    orient: "horizontal", // 布局方式，默认为水平布局，可选为：
    // 'horizontal' ¦ 'vertical'
    x: "right", // 水平安放位置，默认为全图右对齐，可选为：
    // 'center' ¦ 'left' ¦ 'right'
    // ¦ {number}（x坐标，单位px）
    y: "top", // 垂直安放位置，默认为全图顶端，可选为：
    // 'top' ¦ 'bottom' ¦ 'center'
    // ¦ {number}（y坐标，单位px）
    color: ["#1A457D"],
    feature: {
      mark: { show: true },
      dataView: { show: false, readOnly: false },
      magicType: { show: false, type: ["line", "bar", "stack", "tiled"] },
      restore: { show: false },
      saveAsImage: { show: false },
    },
  },
  calculable: true,
  dataZoom: {
    show: false,
    realtime: true,
    start: 0,
    end: 100,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
      axisLabel: {
        color: "#8F9297",
      },
    },
  ],
  yAxis: {
    show: true,
    type: "value",
    axisLine: {
      show: false,
    },
    axisLabel: {
      color: "#8F9297",
    },
    splitLine: {
      lineStyle: {
        type: "dashed",
      },
    },
  },
  series: [
    {
      name: "进入人数",
      type: "line",
      tiled: "总量",
      smooth: false,
      itemStyle: {
        normal: {
          color: "#1890FF",
          lineStyle: {
            color: "#1890FF",
          },
        },
      },
      areaStyle: {
        normal: {
          color: "#1A457C",
        },
      },
      data: [],
    },
  ],
};

export default {
  name: "emInOutTend",
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(function () {
      this.drawbar("tend-root");
      //   var that = this;
      //   var resizeETTimer = null;
      // window.onload = function () {
      //   if (resizeETTimer) {
      //     clearTimeout(resizeETTimer);
      //   }
      //   resizeETTimer = setTimeout(() => {
      //     that.drawbar("tend-root");
      //   }, 300);
      // };
    });
    this.$store.watch(
      (state, getter) => {
        return state.statistical.emInOutTend;
      },
      () => {
        this.drawbar("tend-root");
      }
    );
  },
  methods: {
    drawbar123(id) {
      let o = document.getElementById(id);
      let height = o.clientHeight;
      let width = o.clientWidth;
      o.style.height = height + "px";
      o.style.width = width + "px";
      this.chart = echarts.init(o, null);
      option.series[0].data = this.$store.state.statistical.emInOutTend;
      option.xAxis[0].data = this.$store.state.statistical.emInOutTendxAxis;
      this.chart.setOption(option);
    },
  },
};
</script>

<style scoped>
.hs-et {
  /* border: 1px solid yellow; */
  width: 100%;
  height: 100%;
}

.hs-et-wrap {
  /* border: 1px solid green; */
  /* width: 651px; */
  /* height: 375px; */
  width: 100%;
  height: 100%;
}
</style>